<template>
  <view class="my-container">
    <!-- 用户信息展示区 -->
    <view class="user-profile">
      <view class="avatar-container">
        <image class="avatar-image" src="../../static/navigation_icon/萌芽.png" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <text class="username">用户xxx</text>
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value">365</text>
            <text class="stat-label">连续养生(天)</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">2800</text>
            <text class="stat-label">养生积分</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">8</text>
            <text class="stat-label">养生等级</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能选项列表 -->
    <view class="function-list">
      <view class="function-group">
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/心电图.png" mode="aspectFit"></image>
          <text class="function-text">健康数据</text>
          <text class="function-arrow">></text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/萌芽.png" mode="aspectFit"></image>
          <text class="function-text">养生记录</text>
          <text class="function-arrow">></text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/发布.png" mode="aspectFit"></image>
          <text class="function-text">我的发布</text>
          <text class="function-arrow">></text>
        </view>
      </view>

      <view class="function-group">
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/发布.png" mode="aspectFit"></image>
          <text class="function-text">账号设置</text>
          <text class="function-arrow">></text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/地球.png" mode="aspectFit"></image>
          <text class="function-text">帮助中心</text>
          <text class="function-arrow">></text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="../../static/navigation_icon/地球.png" mode="aspectFit"></image>
          <text class="function-text">关于我们</text>
          <text class="function-arrow">></text>
        </view>
      </view>
    </view>

    <!-- 底部导航栏由pages.json的tabBar配置自动生成 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户数据
      userData: {
        username: '用户xxx',
        streak: 365,
        points: 2800,
        level: 8
      }
    }
  },
  methods: {
    // 导航方法
    navigateTo(url) {
      // 使用switchTab方法跳转到tabBar页面
      uni.switchTab({
        url: url
      })
    }
  }
}
</script>

<style lang="scss">
/* 多邻国风格的颜色变量 */
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-purple: #ce82ff;
$duolingo-orange: #ff9600;
$duolingo-red: #ff4b4b;
$duolingo-light-gray: #f7f7f7;
$duolingo-dark-gray: #4b4b4b;

.my-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $duolingo-light-gray;
  position: relative;
  padding-bottom: 120rpx;
  /* 为底部导航栏留出空间 */
}

/* 用户信息展示区样式 */
.user-profile {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.avatar-container {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid $duolingo-green;
  margin-right: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  color: $duolingo-dark-gray;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.user-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20rpx;
}

.stat-value {
  font-size: 32rpx;
  color: $duolingo-green;
  font-weight: bold;
}

.stat-label {
  font-size: 24rpx;
  color: $duolingo-dark-gray;
  margin-top: 6rpx;
}

/* 功能选项列表样式 */
.function-list {
  padding: 0 30rpx;
}

.function-group {
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 2rpx solid $duolingo-light-gray;
  position: relative;
}

.function-item:last-child {
  border-bottom: none;
}

.function-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.function-text {
  flex: 1;
  font-size: 30rpx;
  color: $duolingo-dark-gray;
}

.function-arrow {
  font-size: 30rpx;
  color: #c0c0c0;
  margin-right: 10rpx;
}

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  height: 120rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-top: 2rpx solid $duolingo-light-gray;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.nav-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 6rpx;
  display: block;
  object-fit: contain;
}

.nav-text {
  font-size: 24rpx;
  color: $duolingo-dark-gray;
}

.nav-item.active .nav-text {
  color: $duolingo-green;
  font-weight: bold;
}
</style>